<template>
<div class="image" @mousemove="()=>showTool = true" @mouseout="()=>showTool = false">
     <img v-lazy="imgUrl">
     <div class="tool" v-show="showTool"> 
          <div class="tool-part">
              <div class="icon thumb" title="放大" @click="magnify">
                <img v-lazy="publicUrl(`/images/img-search.png`)" />
              </div>
              <div class="icon thumb" v-show="showDelete" title="删除">
                <img v-lazy="publicUrl(`/images/img-delete.png`)" />
              </div>
          </div>
    </div>
</div>
<Dialog v-model:visible="visible" :show-top="false" width="20vw">
   <img :src="imgUrl"  class="img" />
</Dialog>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl } from "@/utils/util";
import Dialog from "@/components/Dialog/index.vue";
interface Props{
     imgUrl?:string;       //图片url
     showDelete:boolean;  //是否显示删除键
}

withDefaults(defineProps<Props>(),{
    imgUrl:'',
    showDelete:true
});
const visible = ref<boolean>(false);
const showTool = ref<boolean>(false);
const magnify = ()=>{
  visible.value = true;
}
// const emits = defineEmits<{
// 	(event: "update:imgUrl"): void;
// }>();
//   context.emit("update:imgUrl",targetValue);   // 传递的方法
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>